<template>
  <div class="activity-product-wrap">
    <div v-lazy:background-image="bgImage" class="image">
      <!-- [省赚] 组件 -->
      <profit
        v-if="isUserOfB && productObj.profit"
        class="profit--private"
        :profitObj="productObj"
      >
      </profit>
      <div v-if="productObj.sellOut" class="sellout">
        售罄
      </div>
      <!-- 打标 -->
      <img
        v-if="productObj.productSubscriptUrl"
        class="mark-img"
        :src="productObj.productSubscriptUrl"
      />
    </div>
    <p class="product-name">{{ productObj.productName }}</p>
    <div class="price-box">
      <p>
        ¥
        <span>
          {{ productObj.price }}
        </span>
      </p>
      <span v-if="isShowTagPrice" class="label"
        >¥ {{ productObj.tagPrice }}</span
      >
    </div>
    <div
      v-if="
        (productObj.isCombination == 1 || productObj.isCombination) &&
          !productObj.productSubscriptUrl
      "
      class="goods-of-joint-mark"
    ></div>
  </div>
</template>

<script>
import { minus2num, formatImgUrl, http2https } from '@/utils/util';
import profit from '@/components/profit.vue'; // [省赚] 组件

export default {
  components: {
    profit
  },
  props: {
    productObj: {
      type: Object,
      default() {
        return {};
      }
    },
    isUserOfB: {
      // 是否为小B客户
      tyep: Boolean,
      default: false
    },
    // 是否【预售】商品
    isPresale: {
      tyep: Number,
      default: 0
    }
  },
  computed: {
    bgImage() {
      const width = 133; // 根据iOS最大宽度换算而来 （120/375）* 414
      const height = 133;
      if (this.productObj && this.productObj.productPicUrl) {
        let { productPicUrl } = this.productObj;
        productPicUrl = formatImgUrl(
          productPicUrl.split(',')[0],
          width,
          height
        );
        return http2https(productPicUrl);
      }
      return '';
    },
    getDiff() {
      return minus2num(this.productObj.tagPrice, this.productObj.price);
    },
    activityNo() {
      return this.$route.query.activityNo || '';
    },
    isShowTagPrice() {
      const { tagPrice = 0, price = 0 } = this.productObj;
      return Number(tagPrice) >= Number(price);
    }
  }
};
</script>

<style lang="scss" scoped>
.activity-product-wrap {
  position: relative;
  width: 112px;

  .image {
    margin-bottom: 4px;
    width: 112px;
    height: 112px;
    border-radius: 2px;
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;

    .profit--private {
      max-width: 112px;

      .profit {
        .profit__base,
        .profit__bonus {
          font-size: 10px;
          line-height: 14px;
        }
      }
    }

    .sellout {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      color: #fff;
      font-size: 16px;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .SpringFestival {
      position: absolute;
      top: 0;
      left: 0;
      width: 45px;
      height: 20px;
    }
    .mark-img {
      position: absolute;
      top: 0;
      right: 5%;
      width: 17%;
      object-fit: cover;
      display: inline-block;
    }
  }

  .product-name {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    p {
      margin-right: 5px;
      font-size: 14px;
      font-weight: bold;
      color: #e40000;

      span {
        font-size: 16px;
        color: #e62525;
      }
    }

    .label {
      display: inline-block;
      height: 16px;
      line-height: 16px;
      font-size: 11px;
      color: #999;
      text-decoration: line-through;
    }
  }

  .goods-of-joint-mark {
    position: absolute;
    top: 0;
    right: 0.2rem;
    width: 0.56rem;
    height: 0.64rem;
    background: url('../assets/icon-goods-of-joint.png') no-repeat;
    background-size: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
